import React, { useState } from "react";
import "./login.css";
import instance from "../../axios/index";
import { useNavigate } from "react-router-dom";
import { message } from "antd";

const Login: React.FC = () => {
  const navigate = useNavigate();
  const [isSwitching, setIsSwitching] = useState(false); // 控制切换动画状态
  const [showLogin, setShowLogin] = useState(true); // 控制显示的表单

  // 管理员登录
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const submit = () => {
    const data = {
      username,
      password,
    };
    // 调用登录接口
    instance.post("/api/cmsuser", data).then((res) => {
      // 非空判断
      if (username == "" || password == "") {
        message.error("用户名或密码不能为空");
      } else {
        if (res.data.code === 200) {
          message.success("登录成功");
          const resData = res.data.data.res;
          const firstElementUsername = resData[0] && resData[0].username;
          // 存储角色
          localStorage.setItem("guan", "管理员登录");
          localStorage.setItem("superusername", firstElementUsername);
          // 存储后台返回的rbac权限
          localStorage.setItem("rbaclogin1", JSON.stringify(resData));
          //  存储token
          localStorage.setItem("token", res.data.data.token);
          setTimeout(() => {
            navigate("/home/doctorchearch");
          }, 2000);
        } else {
          message.error("用户名或密码错误");
        }
      }
    });
  };
  // 医生登录
  const [name, setName] = useState("");
  const [identitycard, setIdentitycard] = useState("");
  const submit1 = () => {
    const data = {
      name,
      identitycard,
    };
    // 调用登录接口
    instance.post("/api/doctorlogin", data).then((res) => {
      // 非空判断
      if (name == "" || identitycard == "") {
        message.error("用户名或密码不能为空");
      } else {
        if (res.data.code === 200) {
          //存储密码
          localStorage.setItem("identitycard", identitycard);
          // 存储医生id
          localStorage.setItem("homeallid", res.data.data.ress[0].id);
          // 存储角色
          localStorage.setItem("guan", "医生登录");
          localStorage.setItem("superusername", name);
          message.success("登录成功");
          const resData = res.data.data.res;
          // 存储后台返回的rbac权限
          localStorage.setItem("rbaclogin1", JSON.stringify(resData));
          //  存储token
          localStorage.setItem("token", res.data.data.token);
          navigate("/home/doctorchearch");
        } else {
          message.error("用户名或密码错误");
        }
      }
    });
  };
  // 点击用来切换表单的函数
  const changeForm = () => {
    if (isSwitching) return; // 如果正在切换，则不处理新的切换请求
    setIsSwitching(true); // 开始切换动画
    setTimeout(() => {
      setShowLogin((prev) => !prev); // 切换表单
      setIsSwitching(false); // 动画结束
    }, 1250); // 与 CSS 动画时长相匹配
  };

  return (
    <div className="box">
      <div className="shell">
        {/* 注册表单 */}
        <div
          className={`container a-container ${showLogin ? "is-hidden" : ""}`}
          id="a-container"
        >
          <form
            className="form"
            id="a-form"
            onSubmit={(e) => e.preventDefault()}
          >
            <h2 className="form_title title">医生登录</h2>
            <input
              type="text"
              className="form_input"
              required
              placeholder="请输入用户名"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
            <input
              type="password"
              className="form_input"
              placeholder="请输入密码"
              required
              value={identitycard}
              onChange={(e) => setIdentitycard(e.target.value)}
            />
            <button
              type="button"
              className="form_button submit submitstyle"
              onClick={submit1}
            >
              登录
            </button>
          </form>
        </div>

        {/* 登录表单 */}
        <div
          className={`container b-container ${!showLogin ? "is-hidden" : ""}`}
          id="b-container"
        >
          <form
            className="form"
            id="b-form"
            onSubmit={(e) => e.preventDefault()}
          >
            <h2 className="form_title title">管理员登录</h2>
            <input
              type="text"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              className="form_input"
              placeholder="请输入用户名"
              required
            />
            <input
              type="text"
              placeholder="请输入密码"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="form_input"
              required
            />
            <button
              type="button"
              className="form_button button submit"
              onClick={submit}
            >
              登录
            </button>
          </form>
        </div>

        {/* 切换提示 */}
        <div className="switch" id="switch-cnt">
          <div className="switch_circle"></div>
          <div className="switch_circle switch_circle-t"></div>
          <div
            className={`switch_container ${!showLogin ? "is-hidden" : ""}`}
            id="switch-c2"
          >
            <h2 className="switch_title title">欢迎登录微医</h2>
            <button
              className="switch_button switch-btn submitstyle"
              onClick={changeForm}
            >
              前往医生登录
            </button>
          </div>

          <div
            className={`switch_container ${showLogin ? "is-hidden" : ""}`}
            id="switch-c1"
          >
            <h2 className="switch_title title">欢迎登录微医</h2>
            <button
              className="switch_button button switch-btn"
              onClick={changeForm}
            >
              前往管理员登录
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Login;
